<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小游戏平台</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div id="app">
        <!-- 登录界面 -->
        <div id="login-screen" class="screen active">
            <div class="login-container">
                <h1>小游戏平台</h1>
                <form id="login-form">
                    <input type="text" id="username" placeholder="用户名" required>
                    <input type="password" id="password" placeholder="密码" required>
                    <button type="submit">登录</button>
                </form>
                <p class="hint">提示：任意用户名和密码都可以登录</p>
            </div>
        </div>

        <!-- 游戏选择界面 -->
        <div id="game-menu" class="screen">
            <div class="menu-container">
                <div class="user-info">
                    <span>欢迎，<span id="current-user"></span>！</span>
                    <button id="logout-btn">退出登录</button>
                </div>
                <h2>选择游戏</h2>
                <div class="game-grid">
                    <div class="game-card" data-game="tetris">
                        <h3>俄罗斯方块</h3>
                        <p>经典的俄罗斯方块游戏</p>
                        <button>开始游戏</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 俄罗斯方块游戏界面 -->
        <div id="tetris-game" class="screen">
            <div class="game-container">
                <div class="game-header">
                    <button id="back-to-menu">返回菜单</button>
                    <h2>俄罗斯方块</h2>
                    <div class="score">得分: <span id="score">0</span></div>
                </div>
                <div class="game-area">
                    <canvas id="tetris-canvas" width="300" height="600"></canvas>
                    <div class="game-info">
                        <div class="next-piece">
                            <h4>下一个</h4>
                            <canvas id="next-canvas" width="80" height="80"></canvas>
                        </div>
                        <div class="controls">
                            <h4>操作说明</h4>
                            <p>← → 移动</p>
                            <p>↓ 加速下降</p>
                            <p>↑ 旋转</p>
                            <p>空格 暂停</p>
                        </div>
                        <button id="start-game">开始游戏</button>
                        <button id="pause-game">暂停</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/auth.js"></script>
    <script src="js/tetris.js"></script>
    <script src="js/main.js"></script>
</body>
</html>